<template>
  <div class="shopcar">
    <shopinfo :info="info"></shopinfo>
    <!-- 购物车内容 -->
    <div class="buy">
      <van-checkbox-group v-model="result" ref="checkboxGroup">
        <div v-for="v in cartList" :key="v.id">
          <van-checkbox
            :name="v.product_id"
            @click="ShopChecked(v.product_id,result)"
            label-disabled
          ></van-checkbox>

          <van-swipe-cell>
            <van-card
              :num="v.number"
              :price="v.retail_price"
              :title="v.goods_name"
              :thumb="v.list_pic_url"
            >
              <!-- 步进器 -->
              <template #footer>
                <van-stepper
                  v-model="v.number"
                  :class="showStepper?'':'stepper'"
                  @plus="onChange(v.goods_id,v.id,v.product_id,v.number,1)"
                  @minus="onChange(v.goods_id,v.id,v.product_id,v.number,0)"
                />
              </template>
              <!-- 自定义价格样式 -->
              <template #price>
                <span class="fuhao">￥</span>
                <span class="price">{{v.retail_price}}</span>
                <span class="del">.00</span>
              </template>
            </van-card>
            <!-- 删除滑块 -->
            <template #right>
              <van-button
                square
                text="删除"
                @click="delshop(v.product_id)"
                type="danger"
                class="delete-button"
              />
            </template>
          </van-swipe-cell>
        </div>
      </van-checkbox-group>
    </div>
    <!-- 提交订单 -->
    <div class="order">
      <van-submit-bar :price="checkedGoodsAmount" button-text="提交订单" @submit="onSubmit">
        <van-checkbox v-model="toggleAll" @click="checkAll">全选</van-checkbox>
        <template #tip>
          累计共
          <span style="font-weight:700;font-size:16px">{{checkedGoodsNum}}</span>
          件商品，可点击
          <van-button :type="edit.type" size="small" @click="onStepper">{{edit.info}}</van-button>按钮进行商品数量修改
        </template>
      </van-submit-bar>
    </div>
  </div>
</template>

<script>
import shopinfo from "@/components/details/shopinfo";
import { ShopCart, ShopChecked, ShopUpdate, ShopDel } from "@/request/api";
import { getCookie } from "@/util/cookie";

export default {
  components: {
    shopinfo
  },
  computed: {
    // 价格
    checkedGoodsAmount() {
      return this.cartTotal.checkedGoodsAmount * 100;
    },
    // 数量
    checkedGoodsNum() {
      return this.cartTotal.checkedGoodsCount;
    }
  },
  data() {
    return {
      showStepper: false,
      toggleAll: false,
      cartList: [],
      cartTotal: [],
      result: [],
      edit: { info: "编辑", type: "primary" },
      info: [" 30天无忧退货 ", " 48小时快速退款 ", " 满88元免邮费 "]
    };
  },
  created() {
    ShopCart().then(res => {
      this.toList(res.data.cartTotal, res.data.cartList);

      // 被选中的
      let data = res.data.cartList.filter(v => {
        return v.checked == 1;
      });
      // 多选框被选中的项
      this.result = data.map(v => {
        return v.product_id;
      });
      this.isAll(res.data.cartList);
    });
  },
  methods: {
    // 选择
    ShopChecked(e, v) {
      // 判断存在，存在就是选中
      let isChecked;
      if (v.indexOf(e) > -1) {
        isChecked = "1";
      } else {
        isChecked = "0";
      }
      ShopChecked({
        isChecked,
        productIds: e + ""
      }).then(res => {
        this.toList(res.data.cartTotal, res.data.cartList);
        this.isAll(res.data.cartList);
      });
    },
    // 赋值操作
    toList(e, v) {
      this.cartTotal = e;
      this.cartList = v;
    },
    // 判断是否全选
    isAll(e) {
      let data = e.filter(v => {
        return v.checked == 1;
      });
      if (data.length == this.cartList.length) {
        this.toggleAll = true;
      } else {
        this.toggleAll = false;
      }
    },
    // 删除商品
    delshop(e) {
      let token = getCookie("token");

      ShopDel({
        productIds: e + "",
        token: token
      }).then(res => {
        this.toList(res.data.cartTotal, res.data.cartList);
      });
    },
    // 步进器请求
    AsyncShopUpdate(e) {
      ShopUpdate({
        goodsId: arguments[1],
        id: arguments[2],
        number: e,
        productId: arguments[3]
      }).then(res => {
        this.toList(res.data.cartTotal, res.data.cartList);
      });
    },

    // 步进器加减
    onChange() {
      if (arguments[4]) {
        this.AsyncShopUpdate(arguments[3] + 1, ...arguments);
      } else {
        this.AsyncShopUpdate(arguments[3] - 1, ...arguments);
      }
    },

    // 全选操作
    checkAll() {
      if (this.toggleAll) {
        let data = this.cartList.map(v => {
          return v.product_id;
        });
        ShopChecked({
          isChecked: "1",
          productIds: data.join(",")
        }).then(res => {
          this.toList(res.data.cartTotal, res.data.cartList);
        });
        this.$refs.checkboxGroup.toggleAll(this.toggleAll);
      } else {
        ShopChecked({
          isChecked: "0",
          productIds: this.result.join(",")
        }).then(res => {
          this.toList(res.data.cartTotal, res.data.cartList);
        });
        this.$refs.checkboxGroup.toggleAll(this.toggleAll);
      }
    },

    // 修改样式
    Style(e) {
      let check = document.getElementsByClassName(
        "van-checkbox--label-disabled"
      );
      for (let i = 0; i < check.length; i++) {
        check[i].style.height = e;
      }
      let button = document.getElementsByClassName("delete-button");
      for (let i = 0; i < check.length; i++) {
        button[i].style.height = e;
      }
    },
    // 点击编辑
    onStepper() {
      this.showStepper = !this.showStepper;
      if (this.showStepper) {
        this.Style("132px");
        this.edit = {
          info: "取消编辑",
          type: "danger"
        };
      } else {
        this.Style("104px");
        this.edit = {
          info: "编辑",
          type: "primary"
        };
      }
    },

    // 提交购物车
    onSubmit() {
      let buyShop = this.cartList.map(v => {
        return {
          product_id: v.product_id,
          number: v.number,
          retail_price: v.retail_price,
          goods_name: v.goods_name
        };
      });
      buyShop.payMoney = this.cartTotal.checkedGoodsAmount;
      buyShop.buyCount = this.cartTotal.checkedGoodsCount;
      this.$router.push("/user/address");
      this.$toast.success("提交成功");
    }
  }
};
</script>

<style lang="less" scoped>
.shopcar {
  background-color: #f4f4f4;
  .buy {
    .stepper {
      display: none;
    }
    span {
      display: inline-block;
      font-size: 12px;
    }
    .fuhao {
      color: #323233;
      font-weight: 500;
    }
    .price {
      font-size: 16px;
      color: #323233;
      margin-left: 3px;
      font-weight: 500;
      font-family: Avenir-Heavy, PingFang SC, Helvetica Neue, Arial, sans-serif;
    }
    /deep/.van-button--square {
      height: 100%;
    }
    /deep/.van-card__title {
      font-size: 12px;
    }
    /deep/.van-swipe-cell {
      border-bottom: 1px solid #ccc;
    }
    /deep/.van-checkbox {
      background-color: #fff;
      position: absolute;
      height: 104px;
      width: 10%;
      z-index: 1;
    }
    /deep/.van-checkbox__label {
      width: 100%;
    }
    /deep/.van-checkbox__icon {
      margin-left: 10px;
    }
    /deep/.van-swipe-cell__right {
      position: absolute;
      height: 104px;
    }
    /deep/.van-card {
      background-color: #fff;
      padding: 8px 16px 8px 0;
      float: right;
      width: 90%;
    }
    /deep/.van-card__num {
      font-size: 12px;
    }
    margin-bottom: 196px;
  }
  .order {
    /deep/.van-submit-bar {
      margin-bottom: 50px;
    }
  }
}
</style>